<template>
    <div>
        <div style="margin-bottom: 10px">
            <i-button size="default"   @click="btn_refresh" type="primary" style="margin-right: 10px">刷新</i-button> 
            <!-- <i-button size="default"   type="primary" style="margin-right: 10px" @click="create_pv">创建PV</i-button> -->
            <i-button size="default"   type="error" @click="multi_del_index">批量删除</i-button>
        </div>
        <i-table size="default"   border stripe  :columns="format"  :data="show_list" @on-selection-change="onSelect"  :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="primary"   style="margin-bottom: 5px "  @click="btn_get_mapping(index)">查看mapping</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 显示mapping对话框 -->
        <Modal v-model="show_mapping_modal" width="600"  draggable scrollable>
            <p slot="header" style="color:#f60;text-align:center">
                <span>mapping:{{index_name}}</span>
            </p>
            <div style="height:600px;overflow-y:scroll;"> 
                <pre>{{mapping}}</pre>
            </div>
        </Modal>
    </div>
</template>
<script>

import { get_es_index_list,delete_multi_index,get_mapping } from  '@/api'
import { 
    // post,
    es_cluster_post 
} from '@/api/http'
import store from '@/store'
import { show_simple_page } from '@/common/util' 


export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    type: 'selection',align: 'center', width:60,
                },
                {
                    title: '名字',key: 'index'
                },
                {
                    title: '健康',key: 'health',
                    align: 'center',
                    render:(h,params) => {
                        if(params.row.health=='green'){
                            return h('span',{
                                style: {
                                    color: '#19be6b',
                                }
                            },params.row.health)
                        }else if (params.row.health=='yellow'){
                            return h('span',{
                                style: {
                                    color: '#ff9900'
                                }
                            },params.row.health)
                        }else if (params.row.health=='red'){
                            return h('span',{
                                style: {
                                    color: '#ed4014'
                                }
                            },params.row.health)
                        }else {
                            return h('span',{},params.row.health)
                        }
                    }
                },

                {
                    title: '主分片数量',key: 'pri',
                },
                {
                    title: '副本数',key: 'rep',
                },

                {
                    title: '文档数量',key: 'docs_count',
                },
                {
                    title: '文档删除',key: 'docs_delete'
                },
                {
                    title: '占用磁盘大小',key: 'store_size',
                },
                {
                    title: '主分片大小',key: 'pri_store_size'
                },
                {
                    title: '操作',slot: 'action',width: 200,align: 'center'
                }
            ],
            selecteds: [],
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            pageSize: 50,
            // mapping
            show_mapping_modal: false,
            mapping: null,
            index_name: null
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        btn_get_mapping(index){
            let index_name = this.show_list[index].index
            this.index_name = index_name
            let data = {"index_name":index_name}
            es_cluster_post(get_mapping,data).then(response=>{
                console.log(response.data)
                this.mapping=response.data
                this.show_mapping_modal=true
            })
        },
        // 选项改变就会触发
        onSelect(selection){
            this.selecteds = selection;
            console.log(this.selecteds)
        },
        check(){
            if(this.selecteds.length == 0 ){
                this.$Message.error("请选择一项")
                return false
            }  
            return true
        },
        multi_del_index() {
            if(!this.check()) return
            let data = []
            for(let i=0;i<this.selecteds.length;i++){
                data[i] = this.selecteds[i].index
            }
            // console.log(data)
            let result = confirm("确定要删除"+data+"吗?")
            if(result == false) return 
            data = {"index_list":data}
            es_cluster_post(delete_multi_index,data).then( (response) => {
                console.log(response.data)
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('批量删除index成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            // let cluster = localStorage.getItem('currentEsCluster')
            // let headers = {"es_cluster_name": cluster }
            // es_cluster_post(get_es_index_list,undefined,headers).then(response =>{
            es_cluster_post(get_es_index_list).then(response =>{
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>